<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div class="skin_library">
    <div class="mb-[10px]">
      <el-card shadow="hover">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true" size="small" label-width="120px">
          <el-form-item label="区域编码" prop="regionCode">
            <el-input v-model="queryParams.regionCode" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="区域类型" prop="regionType">
            <el-input v-model="queryParams.regionType" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item style="padding-left: 120px">
            <el-button type="primary" icon="search" @click="doQuery">查询</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <el-card shadow="hover">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button size="small" type="primary" plain icon="Plus" @click="handleVisible('add', null)">新增区域库</el-button>
            <el-button size="small" type="primary" plain icon="download" @click="handleUpload()">导入区域库</el-button>
            <el-button size="small" type="primary" plain icon="download" @click="handledownload()">导出区域库</el-button>
          </el-col>
        </el-row>
      </template>

      <el-table v-loading="loading" :data="regionList" :row-key="getRowKeys" @selection-change="handleSelectionChange">
        <el-table-column type="selection" :reserve-selection="true" width="55" align="left" />
        <el-table-column v-for="item in defaultColunms" :key="item.label" :label="item.label" :prop="item.prop" :fixed="item.fixed" align="left">
          <template #default="scope">
            <span>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="left" width="200" fixed="right">
          <template #default="scope">
            <div>
              <el-tooltip content="详情" placement="top">
                <el-button size="small" link type="primary" icon="view" @click="handleVisible('view', scope.row)">查看</el-button>
              </el-tooltip>
              <el-tooltip content="修改" placement="top">
                <el-button size="small" link type="primary" icon="EditPen" @click="handleVisible('edit', scope.row)">修改</el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button size="small" link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagenation">
        <!-- <el-pagination
          v-show="total > 0"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          layout="prev, pager, next,jumper"
          :total="total"
          @current-change="handleCurrentChange"
        /> -->
        <pagination
          v-show="total > 0"
          style="margin-top: 0;"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          :total="total"
          :background="false"
          layout="total, sizes, prev, pager, next, jumper"
          @pagination="handleCurrentChange"
        />
      </div>
    </el-card>
    <AddRegionalLibrary v-if="addVisible" :add-visible="addVisible" :row-data="currentData" :dialog-title="dialogTitle" @handle-event="handleEvent" />
    <importDialog v-if="importVisible" :import-visible="importVisible" @handle-event="handleImportEvent" />
  </div>
</template>
<script setup>
import AddRegionalLibrary from './AddRegionalLibrary.vue';
import importDialog from './importDialog.vue';
import { getRegionList, deleteRegion, exportData } from '@/api/regionalLibrary';
import { downloadFile } from '@/utils/index';
const addVisible = ref(false);
const importVisible = ref(false);
const regionList = ref([]);
const total = ref(0);
const loading = ref(false);
const currentData = ref(null);
const queryParams = ref({
  isAsc: 'descending',
  pageNum: 1,
  pageSize: 10,
  regionCode: '',
  regionType: ''
});
const dialogTitle = ref('');
const defaultColunms = ref([
  { label: '区域编码', prop: 'regionCode', fixed: 'left' },
  { label: '区域类型', prop: 'regionType', fixed: null },
  { label: '几何形状', prop: 'shape', fixed: null },
  { label: '几何尺寸', prop: 'dimensions', fixed: null },
  { label: '边界条件', prop: 'boundaryCondition', fixed: null },
  { label: '构建方式', prop: 'constructionMethod', fixed: null },
  { label: '区域坐标数据', prop: 'coordinateData', fixed: null },
  { label: '备注', prop: 'remarks', fixed: null }
]);

const selectIds = ref([]);

const getRowKeys = (row) => {
  return row._id;
};
const handleSelectionChange = (val) => {
  selectIds.value = val.map((item) => item._id);
  console.log(selectIds.value);
};
const handledownload = () => {
  const queryParamsData = {
    ...queryParams.value,
    idList: selectIds.value
  };
  console.log(queryParamsData);
  exportData(queryParamsData)
    .then((res) => {
      if (res?.code === 500) {
        ElMessage({ showClose: true, message: '下载失败。', type: 'error' });
        return;
      }
      downloadFile(res, '区域库', 'xlsx');
    })
    .catch(() => {
      loading.value = false;
    });
};
const handleUpload = () => {
  importVisible.value = true;
};
const handleEvent = (data) => {
  if (data?.type === 'refresh') {
    addVisible.value = false;
    doQuery();
  } else {
    addVisible.value = false;
  }
};
const handleImportEvent = (data) => {
  if (data?.type === 'refresh') {
    importVisible.value = false;
    doQuery();
  } else {
    importVisible.value = false;
  }
};
const handleVisible = (type, data) => {
  currentData.value = data;
  if (type === 'add') {
    dialogTitle.value = '新增区域库';
    currentData.value = null;
    addVisible.value = true;
  }
  if (type === 'edit') {
    dialogTitle.value = '修改区域库';
    addVisible.value = true;
  }
  if (type === 'view') {
    dialogTitle.value = '查看区域库';
    addVisible.value = true;
  }
};
// 删除
const handleDelete = (data) => {
  ElMessageBox.confirm('是否确认删除该项？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteRegion(data._id).then((res) => {
      ElMessage({ showClose: true, message: '删除成功。', type: 'success' });
      doQuery();
    });
  });
};
const doQuery = () => {
  regionList.value = [];
  loading.value = true;
  getRegionList(queryParams.value)
    .then((res) => {
      if (res) {
        // 处理铺层
        regionList.value = res?.rows || [];
        total.value = res?.total || 0;
      }
    })
    .finally(() => {
      loading.value = false;
    });
};
const handleCurrentChange = () => {
  // queryParams.value.pageNum = num;
  doQuery();
};
onMounted(() => {
  doQuery();
});
const resetQuery = () => {
  queryParams.value = {
    isAsc: 'descending',
    pageNum: 1,
    pageSize: 10,
    regionCode: '',
    regionType: ''
  };
  doQuery();
};
</script>
<style lang="scss" scoped>
.skin_library {
  padding: 0.5rem;
  height: calc(100vh - 84px);
  overflow: auto;
  width: 100%;
  .pagenation {
    display: flex;
    justify-content: end;
    margin-top: 10px;
  }
}
</style>
